<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-input v-model="params.name" style="width: 200px ; height: 40px" placeholder="请输入名字"></el-input>
      <el-input v-model="params.variety" style="width: 200px;height: 40px" placeholder="请输入品种"></el-input>
      <el-button type="primary" style="margin-left: 8px" @click="findBySearch()" round>搜索</el-button>
      <el-button type="primary" @click="clean()" round>清空</el-button>
      <el-button type="success" @click="add()" round>新增</el-button>
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column prop="userName" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="contact" label="联系方式" width="150">
        </el-table-column>
        <el-table-column prop="name" label="宠物" width="90">
        </el-table-column>
        <!--宠物照片        -->
        <el-table-column label="照片" width="120">
          <template v-slot="scope">
            <el-image
                style="width: 85px; height: 100px"
                :src="'http://localhost:8080/yyj/files/'+scope.row.image"
                @click="showPet(scope.row)"
                >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="applyReason" label="申请理由" width="180">
        </el-table-column>
        <el-table-column prop="setTime" label="约定时间" width="100">
        </el-table-column>
        <el-table-column prop="spot" label="约定地点" width="150">
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="100">
        </el-table-column>
        <el-table-column prop="applyStatus" label="审核状态" width="100">
        </el-table-column>
        <el-table-column prop="reply" label="回复" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <!--绑定整条数据  -->
          <template slot-scope="scope">
            <!-- 表示把当前这一行数据传给这个方法 -->
            <el-button type="success" @click="edit(scope.row)" round>审核</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
              <el-button slot="reference" type="danger" style="margin-left: 5px" round>删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="margin-top: 20px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!-- 对话框   -->
    <div>
      <el-dialog title="请审核" :visible.sync="dialogFormVisible" width="20%">
        <el-form :model="form">
          <el-form-item label="审核状态" width="50%">
            <template>
              <el-radio v-model="form.applyStatus" label="同意">同意</el-radio>
              <el-radio v-model="form.applyStatus" label="拒绝">拒绝</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="审核意见" width="50%">
            <el-input v-model="form.reply" autocomplete="off" style="width: 85%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--点击图片查看详情的对话框 -->
    <div>
      <el-dialog title="宠物信息" :visible.sync="dialogShowPet">
        <el-row>
          <el-col model="Pet">
            <el-card shadow="hover">
              <div style="display: flex">
                <div>
                  <div class="block">
                    <el-image :src="'http://localhost:8080/yyj/files/'+Pet.image"
                              :preview-src-list="['http://localhost:8080/yyj/files/'+Pet.image]"
                              style="height: 150px;width: 120px"></el-image>
                  </div>
                  <div class="bottom clearfix">
                  <span style="font-size: 5px">
                    {{ Pet.currentTime }}
                  </span>
                  </div>
                </div>
                <div>
                  <el-descriptions style="margin-left :20px" title="萌宠信息">
                    <el-descriptions-item label="姓名">{{ Pet.name }}</el-descriptions-item>
                    <el-descriptions-item label="品种">{{ Pet.variety }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ Pet.age }}</el-descriptions-item>
                    <el-descriptions-item label="地址">{{ Pet.address }}</el-descriptions-item>
                    <el-descriptions-item label="介绍">{{ Pet.description }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ Pet.chat }}</el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      params: {
        name: '',
        variety: '',
        //分页需要传到后端的数据
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      dialogShowPet: false,
      form: {},
      Pet: {}
    }
  },
  //页面生成时需要做的事
  created() {
    this.findBySearch();
  },
  methods: {
    /*同意申请*/
    submit() {
      request.post("/audit/check", this.form).then(res => {
        if (res.code === '0') {
          this.$message.success("操作成功");
          this.dialogFormVisible = false;
          this.findBySearch();
        } else {
          this.$message.error((res.msg));
        }
      })
    },
    findBySearch() {
      request.get("/audit/search", {
        params: this.params
      }).then(res => {
        if (res.code === '0') {
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //弹出对话框
    add() {
      this.form = {}
      /*设置对话款能看到* 注意this*/
      this.dialogFormVisible = true
    },
    //清空
    clean() {
      this.params = {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 10
      }
      this.findBySearch();
    },
    /*有一个回调参数 页数大小*/
    handleSizeChange(pageSize) {
      //给params里面的pageSize赋值
      this.params.pageSize = pageSize
      //还要查一遍才能显示数据
      this.findBySearch();
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum
      this.findBySearch();
    },
    //编辑的方法
    edit(obj) {
      this.form = obj;
      this.dialogFormVisible = true;
      this.findBySearch();
    },
    del(id) {
      request.delete("/audit/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.findBySearch();
        } else {
          this.$message({
            message: res.msg,
            type: 'success'
          });
        }
      })
    },
    showPet(obj) {
      this.dialogShowPet = true;
      this.Pet = obj;
    }
  }
}
</script>
